<template>
  <div class="table_total">
    <div class="table-wrapper">
      <table class="custom-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>{{ name_label }}</th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(row, index) in tableData"
            :key="row.id"
            @click="handleRowClick(index)"
            :class="{
              'table-row-selected': row.isSelected,
              'table-row': !row.isSelected,
            }">
            <td>{{ row.id }}</td>
            <td>{{ row.regionIndex }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: "TableComponent",
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    name_label: {
      type: String,
      default: "起降区名称",
    },
  },
  methods: {
    handleRowClick(index) {
      // 先将所有行的 isSelected 设置为 false
      this.tableData.forEach((row) => {
        row.isSelected = false;
      });
      this.$set(this.tableData, index, {
        ...this.tableData[index],
        isSelected: true,
      });
      this.$emit("row", this.tableData[index]);
    },
  },
};
</script>

<style scoped>
.table_total {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.table-wrapper {
  width: 100%;
  height: 99%;
  background-color: transparent !important;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none; 
}

.table-wrapper::-webkit-scrollbar {
  display: none; 
}

.custom-table {
  width: 100%;
  height: 10%;
  border-spacing: 0;
  border-collapse: collapse;
  background-color: transparent;
  border-collapse: separate; /* 不合并单元格边框 */
  border-spacing: 0 3px; /* 为行设置 5px 的垂直间距 */
  color: rgba(170, 178, 185, 1);
  font-family: AlibabaPuHuiTi_2_65_Medium;
  font-size: 2vh;
}

.custom-table td {
  padding: 0.3vh;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  text-align: left;
  border: 0.1px solid transparent;
  background-color: transparent;
}

.custom-table td:nth-child(1) {
  text-align: right;
}

.custom-table td:nth-child(1) {
  text-align: left;
}

.table-row {
  z-index: 1;
  width: 100%;
  transition: background-color 0.3s ease;
  background-image: url("@/assets/img/module4/part1/table3.png");
  background-size: cover;
  font-family: AlibabaPuHuiTi_2_55_Regular;
}

.table-row-selected {
  z-index: 1;
  background-image: url("@/assets/img/module4/part1/table_select.png");
  transition: background-color 0.3s ease;
  background-size: cover;
  font-family: AlibabaPuHuiTi_2_55_Regular;
}

.table-row:hover {
  background-image: url("@/assets/img/module4/part1/table_select.png");
  transition: background-color 0.3s ease;
  background-size: cover;
  font-family: AlibabaPuHuiTi_2_55_Regular;
}
/* 设置表头为固定位置 */
.custom-table thead {
  position: sticky;
  background-size: 100% 100%;
  background-color: transparent;
  text-align: left;
  top: 0;
  background-image: url("@/assets/img/module4/part1/SketchPng94d57dca8bf834cfc73d945c5af729aa3d1ed9845aa60dd37514e4066014c1ae.png");
  background-size: cover;
  background-position: center;
  color: white;
  z-index: 2;
  backdrop-filter: blur(5px);
}
</style>
